<template>
  <a-modal
    :visible="visible"
    :footer="null"
    :header="null"
    @cancel="close"
    :closable="false">
    <div class="phone">
      <div class="phoneTitle" v-if="showType=='wx'">微信预览</div>
      <div class="phoneTitle" v-if="showType=='wb'">微博预览</div>
      <div class="phoneContent">
        <img v-if="info.mbLogoUrl||info.imgUrl1" :src="info.mbLogoUrl||info.imgUrl1"/>
        <div class="title">{{info.contentTitle||info.activityTitle}}</div>
        <div class="author">
          <img class="header" v-if="showType=='wx'" src="~@/assets/wecatDefault.jpg"/>
          <img class="header" v-if="showType=='wb'" src="~@/assets/wbdefault.png"/>
          <div class="name">{{info.authorName}}</div>
          <div class="date">{{info.publish.releaseMode==2?info.publish.releaseSetTime:'今天'}}</div>
          <!--          <div class="date">{{info.createTime}}</div>-->
        </div>
        <div class="article-detail-tip1">{{info.contentIntroduce||info.activityIntroduction}}</div>
        <template v-if="info.contentType">
          <div class="article-content" v-if="info.contentType==1" v-html="info.richContent"></div>
          <div v-else-if="info.contentType==2" class="article-detail-video">
            <video controls style="width: 100%; height: 200px;">
              <source :src="info.videoUrl"/>
            </video>
          </div>
          <div v-else-if="info.contentType==3" class="article-detail-audio">
            <audio controls="controls" :src="info.voiceUrl"></audio>
          </div>
          <div v-else-if="info.contentType==4" class="article-detail-h5">
            <iframe class="article-detail-h5" :src="info.htmlUrl"></iframe>
          </div>
        </template>
        <template v-else>
          <div class="article-content" v-html="info.content"></div>
        </template>
      </div>
    </div>

    <div class="buttons">
      <a-button style="margin-bottom:10px" @click="showType='wx'">微信预览</a-button>
      <a-button @click="showType='wb'">微博预览</a-button>
    </div>
  </a-modal>
</template>

<script>
  //预览
  import PreviewContent from "./PreviewContent";

  export default {
    name: "Preview",
    components: {PreviewContent},
    data() {
      return {
        visible: false,
        showType: 'wx',
        info: {
          publish: {}
        }
      }
    },
    methods: {
      close() {
        this.visible = false;
      },
      show(info) {
        if (!info.publish) {
          info.publish = {}
        }
        this.info = info;
        this.visible = true;
      },
      wxShow() {
      },
      wbShow() {
      }
    }
  }
</script>

<style scoped lang="less">
  /deep/ .ant-modal-content {
    background-color: inherit !important;
    background-image: url('~@assets/frame.png') !important;
    background-size: 100% 100%;
    width: 375px;
    height: 667px;
    box-shadow: none !important;
    margin: auto !important;
  }

  .header {
    width: 34px;
    height: 34px;
    margin-right: 6px;
    border-radius: 50%;
  }

  .title {
    font-size: 20px;
    color: #333333;
  }

  .name {
    color: #76a8ff;
  }

  .date {
    color: #999999;
  }

  .article-content img {
    max-width: 100%;
  }

  .buttons {
    width: 156px;
    height: 70px;
    position: absolute;
    top: 0px;
    right: -42%;
    display: flex;
    flex-direction: column;
  }

  .phone {
    width: 100%;
    height: 605px;
    margin-top: 20px;
    background-color: #DCE1E8;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    overflow-y: auto;

    .phoneTitle {
      padding: 20px;
      color: #333;
      font-size: 22px;
    }

    .phoneContent {
      padding: 40px 20px 20px;
      border-radius: 0 0 32px 32px;
      background-color: white;
      height: 88%;
      overflow: auto;

      .content-title {
        color: #000000;
        font-size: 26px;
        line-height: 2;
      }
    }
  }

  .phoneContent > img {
    width: 100%;
  }

  .author {
    display: flex;
    align-items: center;

    .name {
      margin-right: 10px;
    }
  }
  .article-detail-h5{
    width: 100%;
    height: 420px;
  }

</style>